<template>
  <div class="goodsItem" @click="itemClick">
    <img :src="goodsItem.show.img" alt="" @load="imageLoad"/>
    <div class="goods-info">
      <p>{{ goodsItem.title }}</p>
      <span class="pricebox">
        <i class="fa fa-yen fa-1x"></i>
        <span class="price">{{ goodsItem.price }}</span>
        <i class="fa fa-shopping-cart fa-1x"></i>
      </span>
      <span class="collectbox">
        <span class="collect">{{ goodsItem.cfav }}</span>
        <i class="fa fa-heart-o fa-1x"></i>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "GoodsListItem",
  props: {
    goodsItem: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    imageLoad() {
      this.$bus.$emit('itemImageLoad')
    },
    itemClick(){
      // this.$router.push('/detail/'+this.goodsItem.iid)
      this.$router.push({
        path:'/detail',
        query:{
          iid:this.goodsItem.iid
        }
      })
    }
  },
};
</script>

<style scoped>
.goodsItem {
  width: 46%;
  box-sizing: border-box;
  display: inline-block;
  margin: 0 5px;
}
.goodsItem img {
  width: 100%;
  border-radius: 10px;
}
.goods-info {
  font-size: 16px;
}
.goods-info p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pricebox {
  margin-right: 10px;
  color: #ff0000;
}
.collectbox {
  color: #ff8198;
}
</style>
